$(function() {

    //头部js开始
    // console.log($(".h_left .h_l_list"));
    $(".h_left .h_l_list").on("mouseenter", function() {
        $(this).addClass("h_l_list_current1").siblings().removeClass("h_l_list_current1")
    }).on("mouseleave", function() {
        $(".h_left .h_l_list").removeClass("h_l_list_current1")
    }).on("click", function() {
        $(this).addClass("h_l_list_current2").siblings().removeClass("h_l_list_current2")
    })

    //首页内容区域js开始
    //点击封装，防止代码冗余,进行页面切换
    function clickNav(che) {
        $("#container").find(".contents").css({
            display: "block"
        }).siblings().css({
            display: "none"
        })
        $(che).css({
            display: "block"
        }).siblings().css({
            display: "none"
        })
        $(".con-right").css({
            display: "block"
        })
    }

    //点击顶部列表，给当前元素添加样式
    function currentClick(el) {
        $(el).addClass("h_l_listClick").siblings().removeClass("h_l_listClick")
    }
    //宠物领养点击
    $(".petadopt").on("click", function() {
        clickNav(".onlyadopt");
        currentClick(this);
    });
    //寻找宠物点击
    $(".findpets").on("click", function() {
        clickNav(".onlyfindpets");
        currentClick(this);
    });
    //寻找主人点击
    $(".findowner").on("click", function() {
        clickNav(".onlyfindowner");
        currentClick(this);
    });
    //宠物新闻点击
    $(".petnews").on("click", function() {
        clickNav(".onlynews");
        currentClick(this);
    });
    //生活论坛点击
    $(".petlife").on("click", function() {
        clickNav(".onlylife");
        currentClick(this);
    });
    //宠粮商城点击
    $(".petfood").on("click", function() {
        clickNav(".onlyfood");
        currentClick(this);
    });
    //侧边栏我的购物车点击
    $(".showCart").on("click", function() {
        clickNav(".carts");
    });
    //商品详情我的购物车按钮
    $(".petsFoodCart").on("click", function() {
        clickNav(".carts");
    });
    //侧边栏我的订单点击
    $(".showUserOrder").on("click", function() {
        clickNav(".orders");
    });
    //侧边栏个人信息点击
    $(".showUserInfo").on("click", function() {
        clickNav(".userInfo");
    });



    //商品详情点击
    $(".foodDetails").on("click", function() {
        clickNav(".food_detail");
    });
    //领养详情点击
    $(".mainAdoptDetail").on("click", function() {
        clickNav(".adoptdetaile");
    });
    $(".petsAdopt").on("click", function() {
        clickNav(".adoptdetaile");
    });
    //寻主详情
    $(".petOwner").on("click", function() {
        clickNav(".findOwnerDetail");
    });
    //寻宠详情
    $(".pets").on("click", function() {
        clickNav(".findPetsDetail");
    });
    //新闻详情
    $(".petsNews").on("click", function() {
        clickNav(".petNewsDetail");
    });
    //头部js结束


    //侧边栏js开始
    $(".sidebar").on("mouseenter", ".siderlist", function() {
        $(this).find("i").css({
            color: "#ff7300"
        }).parent().siblings().find("i").css({
            color: "#555"
        })
        $(this).find("p").css({
            color: "#ff7300",
            visibility: "visible"
        }).parent().siblings().find("p").css({
            color: "#555",
            visibility: "hidden"
        })
    }).on("mouseleave", function() {
        $(".sidebar").find("li i").css({
            color: "#555"
        })
        $(".sidebar").find("li p").css({
            color: "#555",
            visibility: "hidden"
        })
    })

    //侧边栏js结束

    //飞入购物车开始
    function flyCart(oImg, e) {
        //结束元素的位置
        var oEnd = document.querySelector("#flyend");
        let oTop = Number(oEnd.offsetTop) + $('.sidebar').position().top;
        let oLeft = $('.sidebar').position().left;
        //是$(".addcar")这个元素点击促发的 开始动画的位置就是这个元素的位置为起点
        //当前点击按钮的图片
        //飞行图片  就是传入进来的oImg
        let flyer = $('<img width="30px" height="30px"  class="u-flyer"  src="' + oImg + '">');
        flyer.fly({
            start: {
                left: e.clientX,
                top: e.clientY
            },
            end: {
                left: oLeft,
                top: oTop,
                width: 0,
                height: 0
            }
        });

    }
    $(".addcarts").on("click", function(e) {
        let event = e;
        let img = $(this).parent().siblings(".list-left").find('img').attr('src');
        flyCart(img, event);
    })
    $(".nowBuy").on("click", function(e) {
        let event = e;
        let img = $(this).parents(".cart").find(".cart_left .middle_photo").find('img').attr('src');
        flyCart(img, event);
    })


    //飞入购物车结束


    //container 区域切换开始

    // 由于类似点击事件比较多，所以封装成一个方法，防止代码冗余
    function clickToggle(toggle) {
        $("#container").find(toggle).css({
            display: "block"
        }).siblings().css({
            display: "none"
        })
    }
    //点击我要送养
    $("#giveadopt").on("click", function() {
        clickToggle(".giveadopt");
    });
    //点击商品列表的一个商品
    $("#foodDetails").on("click", function() {
        clickToggle(".food_detail");
    });
    //点击我要发布寻宠
    $("#releasePets").on("click", function() {
        clickToggle(".findPets");
    });
    //点击我要发布寻主
    $("#releaseOwner").on("click", function() {
        clickToggle(".findownerInfo");
    });

    //container 区域切换结束

    //userInfo区域的切换开始
    $(".userLeft ul").find("li").on("click", function() {
        let toggleIndex = $(this).index() - 1;
        $(".userRight>div").eq(toggleIndex).css({
            display: "block"
        }).siblings().css({
            display: "none"
        })
    })

    //查看更多
    $(".querymore").on("click", function() {
        // console.log($(this).siblings(".mores"));
        $(this).siblings(".mores").css({
            display: "block"
        })
    }).on("mouseleave", function() {
        $(this).siblings(".mores").css({
            display: "none"
        })
    })

    //点击删除
    $(".del").on("click", function() {

        if (!confirm("确认删除吗？")) {
            return;
        } else {
            $(this).parents("tr").remove();
        }
    })

    //点击左边头像
    $("#Info").on("click", function() {
        $(".userRight").find(".baseInfo").css({
            display: "block"
        }).siblings().css({
            display: "none"
        })
    })


    //userInfo区域切换的结束

    //上传头像
    //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    /* 隐藏，显现效果 */
    $(".t_img").click(function() {
        $("#sbox").show("slow");
    });
    $("#hide").click(function() {
        $("#sbox").hide("slow");
    });
    $("#close").click(function() {
        $("#sbox").hide("slow");
    });
    /*  选定图像获取图像src值 */
    var $t_img = document.getElementById('t_img');
    var $img = $t_img.getElementsByTagName('img');
    var index = 0;
    for (var i = 0; i < $img.length; i++) {
        $img[i].index = i;
        $img[i].onclick = function() {
            $img[index].style.borderRadius = "15%";
            $img[index].style.border = "none"
            this.style.borderRadius = "50%";
            this.style.border = "1px solid red"
            index = this.index;
            var $newsrc = $img[index].src;
            $(".t_img").attr('src', $newsrc);
        }
    }
    //点击确认修改按钮更换头像
    $("#but").click(function() {
        $("#sbox").hide("slow");
    })

    //讲选中的图片替换头像的图片
    // $("#file0").change(function() {
    //     var objUrl = getObjectURL(this.files[0]);
    //     if (objUrl) {
    //         $(".t_img").attr("src", objUrl);
    //     }
    // });
    //创建一个可存取到该file的url  
    function getObjectURL(file) {
        var url = null;
        // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已  
        if (window.createObjectURL != undefined) { // basic  
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)  
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome  
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }


    //使用插件，进行图片懒加载
    $("img.lazy").lazyload({
        effect: "fadeIn"
    });

    //返回顶部
    $(".backTop").on("click", function() {

        $("body,html").animate({
            scrollTop: 0
        })

    })

    //关闭广告
    $("#closeAdven").on("click", function() {
        $(".adven").css({
            display: "none"
        })

    })


})